@extends('admin::layouts.master')
@section('head')
    <link rel="stylesheet" href="{{asset('menu/menu.css')}}">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
@endsection
@section('content')
    <div class="card" id="menu">
        <div class="card-header">微信菜单管理</div>
        <ul role="tablist" class="nav nav-tabs">
            <li class="nav-item"><a href="/wx/wechat" class="nav-link">自定义菜单列表</a></li>
            <li class="nav-item"><a href="#" class="nav-link active">添加微信菜单</a></li>
        </ul>
        <form action="/wx/wechat" method="post">
            <div class="card-body card-body-contrast">
                @csrf
                <div class="row">

                    <div class="col-sm-4">
                        {{--@{{active}}--}}

                        <div class="mobile">

                            <div class="menu-container">


                                <div class="menu" v-for="(v,k) in menus">
                                    <h5>
                                        <i @click="del(k)" class="fa fa-minus-square" aria-hidden="true"></i>
                                        <span @click="setActive(v)">@{{ v.name }}</span>
                                    </h5>

                                    <dl>
                                        <dd v-if="v.sub_button.length<5">
                                            <i class="fa fa-plus-square" aria-hidden="true"></i>
                                            <span @click="addSonMenu(v)">添加子菜单</span>
                                        </dd>
                                        <dd v-for="(m,n) in v.sub_button">
                                            <i @click="delsonmenu(v,n)" class="fa fa-minus-square" aria-hidden="true"></i>
                                            <span @click="setActive(m)">@{{m.name}}</span>
                                        </dd>
                                    </dl>
                                </div>

                                {{--两种选择，添加一级菜单，等一级菜单大于3时就不需要添加了--}}
                                <div class="menu" @click="add()" v-if="menus.length<3">
                                    <h5>
                                        <i class="fa fa-plus-square" aria-hidden="true"></i>
                                        添加菜单
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="card">
                            <div class="card-header">
                                菜单设置
                                {{--@{{ active }}--}}
                            </div>
                            <div class="card-block">
                                <div class="form-group row">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">菜单名称</label>
                                    <div class="col-12 col-sm-8 col-lg-6">
                                        <input  type="text" name="name" v-model="active.name" placeholder="请输入菜单名称..." class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="form-group row pt-1 pb-1">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">动作</label>
                                    <div class="col-12 col-sm-8 col-lg-6 form-check mt-2">
                                        <label class="custom-control custom-radio custom-control-inline">
                                            <input type="radio"  name="radio-inline" v-model="active.type" value="view"
                                                   class="custom-control-input"><span
                                                    class="custom-control-label" style="padding-left: 30px">链接</span>
                                        </label>
                                        <label class="custom-control custom-radio custom-control-inline">
                                            <input type="radio"  name="radio-inline" v-model="active.type" value="click"
                                                   class="custom-control-input"><span
                                                    class="custom-control-label" style="padding-left: 30px">关键词</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group row" v-if="active.type == 'view'">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">链接</label>
                                    <div class="col-12 col-sm-8 col-lg-6">
                                        <input type="text" v-model="active.url" placeholder="请输入链接地址..." class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="form-group row" v-if="active.type == 'click'">
                                    <label class="col-12 col-sm-3 col-form-label text-sm-right">关键词</label>
                                    <div class="col-12 col-sm-8 col-lg-6">
                                        <input type="text" v-model="active.key" placeholder="请输入回复关键词..." class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>
                            <textarea name="data" hidden>@{{ menus }}</textarea>
                            <div class="card-footer text-muted">
                                <button class="btn btn-primary offset-sm-2">保存菜单</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        {{--require(["{{asset('menu/menu.js')}}"],function (index) {--}}
            {{--index();--}}
        {{--})--}}
        require(["{{asset('menu/menu.js')}}"],function (index) {
            index([])
        })
    </script>
@endsection